<template>
	<div>
		<div class="note">
			
			<div class="inform">
				<span class="b">经费保障</span>
				<div class="menu">
					<div class="timer-picker" @click="times">
						<span>{{currentTime}}</span><img src="@as/img/zuzhi_wode_xia@2x.png" alt="">
					</div>
					<!-- <img src="@as/img/zuzhi_wode_xia@2x.png" alt=""> -->
				</div>
			</div>
		</div>
		<div class="check">
			<div class="meb">
				<div class="step">
					<span>经费余额（元）</span>
				</div>
				<div class="step1">
					<span>{{info.total_balance}}</span>
				</div>
				<div class="step2">
					<div class="info">
						<span class="sr">本月经费收入（元）</span>
						<span class="sz">{{info.income}}</span>
					</div>
					<div class="fg"></div>
					<div class="infos">
						<span class="sr">本月经费支出（元）</span>
						<span class="sz">{{info.expenditure}}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="list">
			<div class="bar" v-for="(item,index) in info.data" :key="index">
				<!-- budget_type 1收入 2支出 -->
				<div class="box">
					<div class="red_" v-if="item.budget_type==1"></div>
					<div class="gray" v-if="item.budget_type==2"></div>
					<div class="tit">
						<p>{{item.content}}</p>
						<span>{{(item.create_time) | time}}</span>
					</div>
					<span class="add" v-if="item.budget_type==1">+{{item.money}}</span>
					<span class="minus" v-if="item.budget_type==2">-{{item.money}}</span>
				</div>
			</div>
		</div>
		<mu-paper :z-depth="1" class="demo-date-picker" v-if="showTime">
			<div class="shadow" @click="showTime = false"></div>
			<transition name="bounce">
				<mu-date-picker style="z-index:999999" type="month" :date.sync="date1" @change="changeTime" v-if="showTime"></mu-date-picker>
			</transition>
		</mu-paper>
	</div>
</template>

<script>
	
	export default {
			data() {
				return {
					start_time:'',
					info:{},
					date1: undefined,
					currentTime:'',
					value1:'',
					timestamp:0,
					showTime: false,
				}
			},
			mounted() {
				this.$progress.done();
			},
			methods: {
				times:function(){
					this.showTime = true;
				},
				timeNone:function(){
					this.showTime = false;
				},
				changeTime(e) {
					console.log(e,5656);
					this.start_time = Math.floor(e / 1000);
					let year = e.getFullYear();       
					let month = e.getMonth() + 1;              
					this.date1 = year + "年";
					if(month < 10)
							this.date1 += "0";
					this.date1 += month + "月";
					this.currentTime = this.date1;
					this.showTime = false;
					this.Funding()
				},
				//显示当前时间年月
				showCurentTime(){ 
					let now = new Date;
					this.start_time = Math.floor(now / 1000);
					console.log(555,now)
					let year = now.getFullYear();       
					let month = now.getMonth() + 1;              
					this.currentTime = year + "年";
					if(month < 10)
							this.currentTime += "0";
					this.currentTime += month + "月";
					this.currentTime = this.currentTime; 
				},
				// 经费保障
				async Funding () {  
					let that = this;
					try {
						let params = {
							org_id:JSON.parse(Cookies.get('user_71ydj')).organization_id,
							start_time:that.start_time,
						}
						const url = `/app/Organization/funding_guarantee`
						let res = await that.$http.get(url, params)
						that.$progress.done()
						if (res.code === 200) {
							that.info = res.data
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
			},
		created(){
			this.showCurentTime();
			this.Funding()
		}
	}
</script>

<style scoped lang="scss">
	.demo-date-picker {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.shadow {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		margin: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	/deep/.shadow .mu-picker{
		top: 50%;
		left: 50%;
		position: absolute;
		height:380px;
		transform: translate(-50%, -50%);
		color: #f06546 !important;
	}
	.menu{
		 .timer-picker{
				height: 50px;
				text-align: center;
				line-height: 50px;
				margin: 0 2px;
				position: relative;
				.mu-input{
					position: absolute;
					left: 0;
					top:0;
					width: 100%;
					height: 100%;
					opacity: 0;
				}
				span{
					color: #fff;
					font-size: 16px;
					display: inline-block;
					height: 100%;
					line-height: 50px;
					vertical-align: top;
				}
				img{
					width:14px;
					height:14px;
				}
		}
	}
	.mu-picker{
		color: #eb4e44 !important;
	}
</style>

<style scoped lang="scss">
  .note{
		padding: 15px 15px;
		box-sizing: border-box;
		width:100%;
		height:185px;
		background:-webkit-linear-gradient(top,#eb4e44,#f47447);
		background:-o-linear-gradient(bottom,#eb4e44,#f47447);
		background:-moz-linear-gradient(bottom,#eb4e44,#f47447);
		background:linear-gradient(to bottom,#eb4e44,#f47447);
		position: relative;
		.back{
			width:100%;
			display: flex;
			justify-content: flex-start;
			img{
				width:12px;
				height:21.5px;
			}
		}
	}
	.inform{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 25px;
		.b{
			font-size: 28px;
			color:#fff;
			font-weight: bold;
		}
		.menu{
			display: flex;
			align-items: center;
			 
			span{
				font-size: 16px;
				color:#FFF;
			}
			img{
				width:14px;
				height:14px;
				margin-left: 3px;
			}
		}
	}
	.check{
		position: absolute;
		left:0;
		top:125px;
		width:100%;
		padding: 0 15px 15px 15px;
		box-sizing: border-box;
		.meb{
			width:100%;
			height:162px;
			padding: 25px 15px 15px 15px;
			box-sizing: border-box;
			background: #FFF;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			box-shadow: 0px 16px  10px -5px #f8bdb5  inset, 0px 7px 12px 0px #f1f1f1;
			.step{
				width:100%;
				display: flex;
				justify-content: flex-start;
				span{
					font-size: 12px;
					color: #333;
				}
			}
			.step1{
				width:100%;
				display: flex;
				justify-content: flex-start;
				margin-top: 5px;
				span{
					font-size: 35px;
					color:#333;
					font-weight: bold;
					display:inline-block;
					line-height: 1;
				}
			}
			.step2{
				margin-top: 15px;
				width:100%;
				height:42px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.info{
					width:49.5%;
					display: flex;
					flex-direction: column;
					.sr{
						font-size: 12px;
						color: #999;
					}
					.sz{
						font-size: 20px;
						color: #333;
						font-weight: bold;
					}
				}
				.fg{
					width:2px;
					height:30px;
					background: #ddd;
				}
				.infos{
					width:49.5%;
					padding: 0 0 0 20px;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					.sr{
						font-size: 12px;
						color: #999;
					}
					.sz{
						font-size: 20px;
						color: #333;
						font-weight: bold;
					}
				}
			}
		}
	}
	.list{
		width:100%;
		padding: 0 0 0 15px;
		margin-top: 132px;
		.bar{
			width:100%;
			border-bottom:1px solid #f1f1f1;
			margin-top: 15px;
			.box{
				width:100%;
				padding: 0 15px 10px 0;
				display: flex;
				box-sizing: border-box;
				position: relative;
				.gray{
					width:6px;
					height:6px;
					border-radius: 50%;
					background: #ccc;
					position: absolute;
					left:0;
					top:7px;
				}
				.red_{
					width:6px;
					height:6px;
					border-radius: 50%;
					background: #f47548;
					position: absolute;
					left:0;
					top:7px;
				}
				.tit{
					width:78%;
					margin-left: 4%;
					display: flex;
					flex-direction: column;
					p{
						font-size: 14px;
						color:#333;
						margin: 0;
						padding: 0;
					}
					span{
						font-size: 12px;
					  color:#999;
						margin-top: 3px;
					}
				}
				.add{
					color:#f47548;
					font-size: 14px;
					font-weight: bold;
					position: absolute;
					right:15px;
				}
				.minus{
					color:#333;
					font-size: 14px;
					font-weight: bold;
					position: absolute;
					right:15px;
				}
			}
			
			// .information{
			// 	width:100%;
			// 	padding: 15px 15px 15px 0;
			// 	box-sizing: border-box;
			// 	display: flex;
			// 	flex-direction: column;
			// 	.too{
			// 		width:100%;
			// 		display: flex;
			// 		justify-content: space-between;
			// 		position: relative;
			// 		margin-bottom: 7px;
			// 		.gray{
			// 			width:6px;
			// 			height:6px;
			// 			border-radius: 50%;
			// 			background: #ccc;
			// 			position: absolute;
			// 			left:0;
			// 			top:7px;
			// 		}
			// 		.red_{
			// 			width:6px;
			// 			height:6px;
			// 			border-radius: 50%;
			// 			background: #f47548;
			// 			position: absolute;
			// 			left:-5px;
			// 			top:7px;
			// 		}
			// 		.tit{
			// 			width:85%;
			// 			margin-left: 3%;
			// 			p{
			// 				font-size: 14px;
			// 				color:#333;
			// 				margin: 0;
			// 				padding: 0;
			// 			}
			// 		}
			// 		span{
			// 			color:#333;
			// 			font-size: 14px;
			// 			font-weight: bold;
			// 		}
			// 		.add{
			// 			color:#f47548;
			// 			font-size: 14px;
			// 			font-weight: bold;
			// 		}
			// 	}
			// }
		}
		// .too_p{
		// 	width:100%;
		// 	.rq{
		// 		padding: 0 15px 5px 0;
		// 		border-bottom: 1px solid #ddd;
		// 		display: flex;
		// 		justify-content: space-between;
		// 		align-items: center;
		// 		.lf span{
		// 			font-size: 12px;
		// 			color:#999;
		// 		}
		// 		.rf span{
		// 			font-size: 12px;
		// 			color:#999;
		// 		}
		// 	}
			// .information{
			// 	width:100%;
			// 	padding: 15px 15px;
			// 	box-sizing: border-box;
			// 	display: flex;
			// 	flex-direction: column;
			// 	.too{
			// 		width:100%;
			// 		display: flex;
			// 		justify-content: space-between;
			// 		position: relative;
			// 		margin-bottom: 20px;
			// 		.gray{
			// 			width:6px;
			// 			height:6px;
			// 			border-radius: 50%;
			// 			background: #ccc;
			// 			position: absolute;
			// 			left:-5px;
			// 			top:7px;
			// 		}
			// 		.red_{
			// 			width:6px;
			// 			height:6px;
			// 			border-radius: 50%;
			// 			background: #f47548;
			// 			position: absolute;
			// 			left:-5px;
			// 			top:7px;
			// 		}
			// 		.tit{
			// 			width:85%;
			// 			margin-left: 2%;
			// 			p{
			// 				font-size: 14px;
			// 				color:#333;
			// 				margin: 0;
			// 				padding: 0;
			// 			}
			// 		}
			// 		span{
			// 			color:#333;
			// 			font-size: 14px;
			// 			font-weight: bold;
			// 		}
			// 		.add{
			// 			color:#f47548;
			// 			font-size: 14px;
			// 			font-weight: bold;
			// 		}
			// 	}
			// }
		// }
	}
	.bounce-enter-active {
        animation: bounce-in .5s;
    }
    .bounce-leave-active {
        animation: bounce-out .5s;
    }
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(1);
        }
    }
    @keyframes bounce-out {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(0);
        }
    }
</style>